<template>
  <div class="dashboard-container">
    <div class="topTit">
      <el-date-picker
        v-model="value"
        size="mini"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="setDate"
      />
      <div class="outData" @click="outData">导出原始数据</div>
    </div>
    <div class="setContent">
      <div class="cont">
        <el-table :data="tableData" stripe>
          <el-table-column label="姓名" prop="name" width="90" fixed align="center">
            <template scope="scope">
              <span style="color: #3345ff;">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="workNumber" label="工号" width="120" fixed align="center" />
          <el-table-column prop="departmentName" label="部门" width="120" show-overflow-tooltip fixed align="center" />
          <el-table-column prop="post" label="职位" show-overflow-tooltip fixed />
          <div v-if="total>0">
            <el-table-column v-for="(item, index) in tableData[0].attendsList" :key="index" :label="item.attendDate" align="center" width="95">
              <template scope="scope">
                <span v-show="item.attendStatus != '缺卡'" style="cursor:pointer;color: #3345ff" @click="showInfo(scope.row, item)">{{ item.attendStatus }}</span>
                <span v-show="item.attendStatus == '缺卡'" style="cursor:pointer;">{{ item.attendStatus }}</span>
              </template>
            </el-table-column>
          </div>
        </el-table>
        <div class="pageList">
          <el-pagination
            v-if="total > params.pageSize"
            layout="prev, pager, next"
            :total="total"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" center width="30%" style="border-radius: 10px;" :before-close="handleClose">
      <div class="userInfo">
        <div class="header">
          <div v-if="userInfo.icon" class="headIcon"><img :src="userInfo.icon" alt="" width="30"></div>
          <div v-if="!userInfo.icon" class="headNoIcon">{{ userInfo.userName ? userInfo.userName.substring(0,1) : '无' }}</div>
          <div>
            <div>{{ userInfo.userName }}</div>
            <div>{{ userInfo.attendGroup ? userInfo.attendGroup.name : '-' }} 考勤时间: {{ userInfo.attendGroup ? userInfo.attendGroup.startWorkTime : '-' }} - {{ userInfo.attendGroup ? userInfo.attendGroup.offWorkTime : '-' }}</div>
          </div>
        </div>
        <div class="content">
          <div><span>打卡时间：</span> {{ userInfo.attendStartWork ? userInfo.attendStartWork.punchTime : '缺卡' }} - {{ userInfo.attendOffWork ? userInfo.attendOffWork.punchTime : '缺卡' }}</div>
          <div><span>打卡状态：</span> {{ userInfo.attendStatus || '缺卡' }}</div>
          <div><span>打卡地址：</span> {{ userInfo.address || '未知' }}</div>
          <div><span>打卡备注：</span> {{ userInfo.description || '暂无备注' }} </div>
          <div><span>打卡图片：</span>
            <span v-if="userInfo.picture" class="headIcon"><img :src="userInfo.picture" alt="" width="30"></span>
            <span v-if="!userInfo.picture" class="headNoIcon">暂无</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'Dashboard',
  filters: {
    dateFormat(val) {
      return val
    }
  },
  data() {
    return {
      value: '',
      title: '',
      total: 0,
      dialogVisible: false,
      userInfo: {},
      params: {
        startTime: '',
        endTime: '',
        page: 1,
        pageSize: 10
      },
      loading: true,
      tableData: [{}]
    }
  },
  created() {
    const now = new Date()
    const stTime = now.getFullYear() + '-' + (now.getMonth() + 1 - 1) + '-' + now.getDate()
    const endTime = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate()
    this.setValue([stTime, endTime])
    this.getAttendanceList()
  },
  methods: {
    getAttendanceList() {
      this.$store.dispatch('attendance/attendanceList', this.params).then((res) => {
        this.total = res.total
        this.tableData = res.rows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 导出数据
    outData() {
      const startTime = moment(this.value[0], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')
      const endTime = moment(this.value[1], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')
      console.log(this.value)
      this.$store.dispatch('attendance/signExoprtAct', { startTime, endTime }).then((res) => {
        console.log(res)
        return
        // if (res.success) {
        //   const url = res.data
        //   const a = document.createElement('a')
        //   a.href = url
        //   a.click()
        // } else {
        //   this.$message.error('出错了！' + res.message)
        // }
      }).catch(() => {
        this.loading = false
      })
    },
    setDate(value) {
      this.params.startTime = moment(value[0], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')
      this.params.endTime = moment(value[1], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')
      this.getAttendanceList(value[0], value[1])
    },
    setValue(value) {
      const date = [value[0], value[1]]
      this.params.startTime = value[0]
      this.params.endTime = value[1]
      this.value = date
    },
    showInfo(row, attend) {
      const data = row
      this.title = moment(attend.attendDate, 'YYYY-MM-DD').format('YYYY年MM月DD日')
      console.log(data)
      this.$store.dispatch('attendance/attendanceDetails', { userId: row.userId, attendDate: moment(attend.attendDate, 'YYYY-MM-DD').format('YYYY-MM-DD') })
        .then(res => {
          console.log(res)
          this.userInfo = res
          this.dialogVisible = true
        })
    },
    handleClose(done) {
      done()
    },
    handlePageChange(val) {
      this.params.page = val
      this.getAttendanceList()
    },
    formatDate(val) {
      return moment(new Date(Number(val))).format('HH:mm:ss')
    }
  }
}
</script>
<style lang="scss">
  .setContent {
    .cont {
      .el-table thead th, .el-table thead tr {
        background: #edeffd;
      }
    }

    .pageList {
      text-align: right;
      padding: 10px 0;

      .el-pager li {
        margin: 0 5px;
        min-width: 28px;
        width: 28px;
      }

      .active {
        background: #3345ff;
        border-radius: 100%;
        color: #fff;
      }
    }
  }

  .el-dialog__header {
    border-bottom: solid 1px #eaeaea;
  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      padding: 0 15px;

      .topTit {
        line-height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .outData {
          color: #3345ff;
          cursor: pointer;
          font-size: 14px;
        }
      }

      .setContent {
        background: #fff;
        min-height: 510px;

        .title {
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;

        }

        .cont {
        }
      }

      .userInfo {
        .header {
          background: rgba(40, 97, 254, 0.14);
          display: flex;
          padding: 10px 20px;
          line-height: 20px;
          border-radius: 8px;
          .headIcon {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            img{
              width: 40px;
              height: 40px;
              line-height: 40px;
              border-radius: 100%;
            }
          }
          .headNoIcon{
            font-size: 20px;
            text-align: center;
            line-height: 40px;
            margin-right: 10px;
            width: 40px;
            height: 40px;
            color: #fff;
            background: #3345ff;
            border-radius: 100%;
          }
        }

        .content {
          line-height: 35px;
          margin-top: 10px;
        }
      }
    }
  }
</style>
